<style scoped>
.container{
    width:100%;
    height:calc( 100vh - 50px );
    overflow: auto;
}

.nav{
    width:100%;
    height:50px;
    box-sizing: border-box;
    border-top:1px solid #E7E7E7;
}


.nav a {
    display: block;
    float: left;
    width:25%;
    height:49px;
    text-decoration: none;
    color:#5D656B;
    position: relative;
}

.nav a div {
    width:22px;
    height:22px;
    background-repeat: no-repeat;
    background-size: 22px;
    margin:3px auto;
}

.nav a p {
    font-size:12px;
    text-align: center;
}

.nav a.cart div.num{
    position: absolute;
    top:0px;
    left:50%;
    margin-left:10px;
    font-family: 'Arial';
    width:16px;
    height:16px;
    line-height: 16px;
    border-radius: 8px;
    background-color: #FF0000;
    color:#FFF;
    text-align: center;
    font-size:12px;
}

.icon-home{
    background-image: url(../assets/home.png);
}

.router-link-exact-active .icon-home{
    background-image: url(../assets/home_fill.png);
}

.icon-cart{
    background-image: url(../assets/cart.png);
}

.router-link-exact-active .icon-cart{
    background-image: url(../assets/cart_fill.png);
}

.icon-form{
    background-image: url(../assets/form.png);
}

.router-link-exact-active .icon-form{
    background-image: url(../assets/form_fill.png);
}

.icon-people{
    background-image: url(../assets/people.png);
}

.router-link-exact-active .icon-people{
    background-image: url(../assets/people_fill.png);
}

</style>
<template>
    <div>
        <div class="container">
            <router-view></router-view>
        </div>
        <div class="nav">
            <router-link to="/mlapp">
                <div class="icon-home"></div>
                <p>首页</p>
            </router-link>
            <router-link to="/mlapp/cart" class="cart">
                <div class="icon-cart"></div>
                <p>购物车</p>
                <div class="num" v-if="cart.length!==0">{{cart.length}}</div>
            </router-link>
            <router-link to="/mlapp/order">
                <div class="icon-form"></div>
                <p>订单列表</p>
            </router-link>
            <router-link to="/mlapp/my">
                <div class="icon-people"></div>
                <p>我的</p>
            </router-link>
        </div>
    </div>
</template>
<script>
import {mapState} from 'vuex';
export default {
    computed:{
        ...mapState(['cart'])
    }
}
</script>
